<section [ngStyle]="tagData.cssStyle|styleFilter">
  <ng-container *ngIf="tagData.data.headDiv">
    <div class="headDiv" [ngStyle]="tagData.data?.headDiv?.title?.boxCssStyle|styleFilter">
      <p class="headDivP" *ngIf="tagData.data?.headDiv?.title?.label"
        [ngStyle]="tagData.data?.headDiv?.title?.cssStyle|styleFilter">
        {{tagData.data?.headDiv?.title?.label}}</p>
      <p class="headDivP" *ngIf="tagData.data?.headDiv?.introduce"
        [ngStyle]="tagData.data?.headDiv?.introduce?.cssStyle|styleFilter">
        {{tagData.data?.headDiv?.introduce?.label}}</p>
      <div class="moreLinkDiv" *ngIf="tagData.data.headDiv?.moreLink">
        <span class="moreLinkLabel">{{tagData.data.headDiv?.moreLink?.link?.label}}</span>
        <img class="moreLinkIcon" *ngIf="tagData.data?.headDiv?.moreLink?.iconUrl"
          [ngStyle]="tagData.data?.headDiv?.moreLink?.link?.params?.iconCssStyle|styleFilter"
          src='{{tagData.data?.headDiv?.moreLink?.iconUrl}}' onerror="this.src='assets/icon/arrow_icon_right@3x.png'"
          appDebounceClick (debounceClick)="detailPage(tagData.data?.headDiv?.moreLink?.link)" />
      </div>
    </div>
  </ng-container>

  <ng-container *ngFor="let item of listData,let dataIndex = index">
    <div class="main-box" [ngStyle]="item.mainBoxCssStyle|styleFilter">
      <div class="top-box" [ngStyle]="item.topBoxCssStyle|styleFilter">
        <div [ngStyle]="item.topLeftBoxCssStyle|styleFilter">
          <span class="top-number 1" *ngIf="item.noRowLeft?.firstText?.label"
            [ngStyle]="item.noRowLeft?.firstText?.cssStyle|styleFilter">{{item.noRowLeft?.firstText?.label}}</span>
          <div class="top-number 2" *ngIf="item.noRowLeft?.secondText?.label"
            [ngStyle]="item.noRowLeft?.secondText?.cssStyle|styleFilter">{{item.noRowLeft?.secondText?.label}}

            <span class="title" *ngIf="item.noRowLeft?.secondText?.label2"
              [ngStyle]="item.noRowLeft?.secondText?.label2CssStyle|styleFilter">{{item.noRowLeft?.secondText?.label2}}</span>
            <span class="title" *ngIf="item.noRowLeft?.secondText?.label3"
              [ngStyle]="item.noRowLeft?.secondText?.label3CssStyle|styleFilter">{{item.noRowLeft?.secondText?.label3}}</span>
          </div>
        </div>
        <div class="top-number 3" [ngStyle]="item.noRowRight?.firstText?.cssStyle|styleFilter">
          {{item.noRowRight?.firstText?.label}}

          <img class="topNumberIcon" *ngIf="item.noRowRight?.firstText?.imgUrl"
            [src]="item.noRowRight?.firstText?.imgUrl"
            onerror="this.src='https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_1687923202923e96b54d4f89a16b7adaa242009de6ccf.png'"
            [ngStyle]="item.noRowRight?.firstText?.imagUrlcssStyle|styleFilter" />

        </div>
      </div>

      <!--蜂喔商户1.6.15新增recommendBoxCssStyle属性配置-->
      <div class="recomment-bg2" [ngStyle]="item.recommendBoxCssStyle|styleFilter">
        <div *ngIf="setCustomBoxVisibility==='true'">
          <ng-container *ngIf="item.disableCheck!==undefined; else disableElseTemplate">
            <div class="item-left" [ngStyle]="item.checkCssStyle|styleFilter">
              <i class="check-img disableCheck" [ngStyle]="item.checkImgCssStyle|styleFilter"></i>
            </div>
          </ng-container>
          <ng-template #disableElseTemplate>
            <div class="item-left" appDebounceClick (debounceClick)="choose(item)" *ngIf="item.check!==undefined"
              [ngStyle]="item.checkCssStyle|styleFilter">
              <i class="check-img" [ngStyle]="item.checkImgCssStyle|styleFilter"
                [ngClass]="{'checked-img': item.checked}"></i>
            </div>
          </ng-template>
        </div>
        <div class="item-middle" *ngIf="item.img" [ngStyle]="item.itemMiddleCssStyle|styleFilter">
          <!--新增秒杀图标-->
          <img class="pic" src="{{item.img.imgUrl}}" onerror="this.src='assets/img/375x250@2x.png'"
            [ngStyle]="item.img.cssStyle|styleFilter" />
          <span class="auth-left" *ngIf="item.leftTag" [ngStyle]="item.leftTagCssStyle | styleFilter">
            <img *ngIf="item.leftTagIcon" [src]="item.leftTagIcon" class="leftTagIcon"
              onerror="this.src='https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_16602762618750d54d6dcdfa57316438e2e9976d7748d.png'"
              [ngStyle]="item.leftTagIconCssStyle|styleFilter" />
            {{item.leftTag}}
          </span>
        </div>

        <div class="item-right" appDebounceClick (debounceClick)="detailPage(item.link,$event)"
          [ngStyle]="item.rightBox?.cssStyle|styleFilter">
          <p class="item-title" [ngStyle]="item.firstRowLeft?.firstText?.boxCssStyle | styleFilter">
            <span class="title" *ngIf="item.title?.fistText?.label">{{item.title?.fistText?.label}}</span>
            <span *ngIf="item.firstRowLeft?.firstText?.label" class="title-status"
              [ngStyle]="item.firstRowLeft?.firstText?.cssStyle | styleFilter">{{item.firstRowLeft.firstText.label}}</span>
          </p>
          <p class="item-title-sub" *ngIf="item.secondRowLeft?.firstText?.label"
            [ngStyle]="item.secondRowLeft?.firstText?.cssStyle | styleFilter">{{item.secondRowLeft.firstText.label}}
          </p>
          <p class="item-title-sub" *ngIf="item.secondRowLeft2?.firstText?.label"
            [ngStyle]="item.secondRowLeft2?.firstText?.cssStyle | styleFilter">{{item.secondRowLeft2.firstText.label}}
          </p>
          <p class="item-title-sub" *ngIf="item.recommedBox?.firstText?.label"
            [ngStyle]="item.secondRowLeft?.firstText?.cssStyle | styleFilter">
            <img class="recommendIcon" src="{{item.recommedBox.icon}}"
              onerror="this.src='assets/icon/list_icon-recommend@3x.png'"
              [ngStyle]="item.secondRowLeft?.iconCssStyle | styleFilter" />
            <span *ngIf="item.recommedBox.firstText.label"
              [ngStyle]="item.recommedBox.firstText.cssStyle|styleFilter">{{item.recommedBox.firstText.label}}</span>
            <span *ngIf="item.recommedBox.secondText.label"
              [ngStyle]="item.recommedBox.secondText.cssStyle|styleFilter">{{item.recommedBox.secondText.label}}</span>
            <span *ngIf="item.recommedBox.thirdText.label"
              [ngStyle]="item.recommedBox.secondText.cssStyle|styleFilter">{{item.recommedBox.thirdText.label}}</span>
          </p>
          <!-- address -->
          <p class="item-title-sub" *ngIf="item.fifthRowLeft?.firstText"
            [ngStyle]="item.fifthRowLeft?.firstText?.cssStyle | styleFilter">
            <img class="address-icon" *ngIf="item.fifthRowLeft.firstText.png"
              src="assets/icon/{{item.fifthRowLeft?.firstText.png}}" alt=""
              [ngStyle]="item.fifthRowLeft?.firstText?.pngCssStyle | styleFilter">
            <span style="display: inline-block; margin-left: 0.5rem;"
              [ngStyle]="item.fifthRowLeft?.secondText?.cssStyle | styleFilter">{{item.fifthRowLeft.secondText.label}}
            </span>
          </p>
          <!-- call  | currency:'CNY':'':'1.0-0')    | currency:'CNY':'':'0.2-2'  -->
          <p class="item-title-sub 1" *ngIf="item.thirdRowLeft?.firstText?.label"
            [ngStyle]="item.thirdRowLeft?.firstText?.cssStyle | styleFilter">{{item.thirdRowLeft.firstText.label}}<span
              style="display: inline-block; margin-left: 0.5rem;" *ngIf="item.thirdRowLeft.secondText.label"
              [ngStyle]="item.thirdRowLeft?.secondText?.cssStyle | styleFilter">{{(getInterger(item.thirdRowLeft.secondText.label+
              0)| currency:'CNY':'':'1.0-0')}}<i class="price-digits-o">{{(item.thirdRowLeft.secondText.label - 0 |
                currency:'CNY':'':'0.2-2')+'' | slice:-3}}</i></span>
            <span style="display: inline-block; margin-left: 0.5rem;" *ngIf="item.thirdRowLeft.thirdText.label"
              [ngStyle]="item.thirdRowLeft?.thirdText?.cssStyle | styleFilter">{{item.thirdRowLeft.thirdText.label}}</span>
          </p>
          <!-- 奖金 -->
          <p class="item-title-sub 2" *ngIf="item?.middleRowLeft?.firstText?.label"
            [ngStyle]="item?.middleRowLeft?.firstText?.cssStyle | styleFilter">
            {{item?.middleRowLeft?.firstText?.label}}

            <span style="display: inline-block; margin-left: 0.5rem;" *ngIf="item?.middleRowLeft?.secondText?.label"
              [ngStyle]="item?.middleRowLeft?.secondText?.cssStyle | styleFilter">{{item?.middleRowLeft?.secondText?.label}}</span>

            <span style="display: inline-block; margin-left: 0.5rem;" *ngIf="item?.middleRowLeft?.thirdText?.label"
              [ngStyle]="item.middleRowLeft?.thirdText?.cssStyle | styleFilter">{{(getInterger(item.middleRowLeft.thirdText.label+
              0)| currency:'CNY':'':'1.0-0')}}<i class="price-digits-o"
                [ngStyle]="item.middleRowLeft?.thirdText?.digitsCssStyle | styleFilter">{{(item.middleRowLeft.thirdText.label
                - 0 |
                currency:'CNY':'':'0.2-2')+'' | slice:-3}}</i></span>


            <span style="display: inline-block; margin-left: 0.5rem;" *ngIf="item?.middleRowLeft?.fourthText?.label"
              [ngStyle]="item?.middleRowLeft?.fourthText?.cssStyle | styleFilter">{{item?.middleRowLeft?.fourthText?.label}}</span>

            <span style="display: inline-block; margin-left: 0.5rem;" *ngIf="item?.middleRowLeft?.fifthText?.label"
              [ngStyle]="item.middleRowLeft?.fifthText?.cssStyle | styleFilter">{{(getInterger(item.middleRowLeft.fifthText.label+
              0)| currency:'CNY':'':'1.0-0')}}<i class="price-digits-o"
                [ngStyle]="item.middleRowLeft?.fifthText?.digitsCssStyle | styleFilter">{{(item.middleRowLeft.fifthText.label
                - 0 |
                currency:'CNY':'':'0.2-2')+'' | slice:-3}}</i></span>

          </p>
          <div class="recomment-s-a" *ngIf="item.fourthRowLeft?.firstText?.label">
            <p class="item-recoment-status" [ngStyle]="item.fourthRowLeft?.firstText?.cssStyle | styleFilter">
              {{item.fourthRowLeft?.firstText?.label}}</p>
            <!-- lj 电话 -->
            <p *ngIf="item.fourthRowRight?.phoneBtn?.phone" class="recomment-action" appDebounceClick
              (debounceClick)="recommentPhoneAction(item.fourthRowRight?.phoneBtn?.phone)">
              {{item.fourthRowRight?.phoneBtn?.label}}</p>
            <p *ngIf="item.fourthRowRight?.commonBtn?.label" class="recomment-action" appDebounceClick
              (debounceClick)="recommentAction(item)">
              {{item.fourthRowRight?.commonBtn?.label}}</p>
            <!-- ppw 推荐 -->
            <p *ngIf="item.fourthRowRight?.label" class="recomment-action" appDebounceClick
              (debounceClick)="recommentAction(item)">
              {{item.fourthRowRight?.label}}</p>
          </div>
          <div class="fourthRight"
            *ngIf="item.fourthRowRight &&  item.fourthRowRight.iconList && tagData.style!==tagData.name">
            <ng-container *ngFor="let icons of item.fourthRowRight.iconList, let i = index">
              <span class="icon-label-bg" appDebounceClick (debounceClick)="iconClick(icons,dataIndex)">
                <img class="fourthRight-img" src="{{icons.iconName}}">
                <p *ngIf=" icons.label && icons.label.length > 0" class="icon-label 2">
                  {{icons.label}}
                </p>
              </span>
            </ng-container>
          </div>
          <!--蜂喔商户 1.6.15 评价-->
          <div class="sixthRowLeft" *ngIf="item.sixthRowLeft?.firstText?.label"
            [ngStyle]="item.sixthRowLeft?.firstText?.cssStyle | styleFilter">
            <app-rating [rate]="item.sixthRowLeft?.firstText?.start">
            </app-rating>
            <span *ngIf="item.sixthRowLeft?.firstText?.label"
              [ngStyle]="item.sixthRowLeft?.firstText?.labelCssStyle|styleFilter">
              {{item.sixthRowLeft?.firstText?.label}}
            </span>
          </div>
        </div>
      </div>
      <!--  顾问 consultantBox  1.7.1新增修改推荐语弹出modal  1.6.15 版本新增 consultantBoxCssStyle 用于配置 预览分享 -->
      <div class="consultant-bg 512" *ngIf="item.consultantBox" [ngStyle]="item.consultantBoxCssStyle|styleFilter">
        <div class="firstRowLeftBox">
          <img src="assets/icon/img_left mh@3x.png" *ngIf="item.consultantBox?.firstRowLeft?.firstText?.label"
            class="bg-icon" [ngStyle]="item.consultantBox?.firstRowLeft?.firstText?.iconCssStyle|styleFilter" alt="">

          <p class="consultant-info" *ngIf="item.consultantBox.headRowLeft?.firstText?.label">
            <img class="consultant-avatar" src="{{item.consultantBox.headRowLeft?.icon?.iconName}}" alt=""
              onerror="onerror=null;src='assets/img/headportraitstaff.png'">
            <span class="consultant-name">{{item.consultantBox.headRowLeft?.firstText?.label}}</span>
            <span class="consultant-tag">{{item.consultantBox.headRowLeft?.secondText?.label}}</span>
          </p>
          <div class="consultant-remark" *ngIf="item.consultantBox?.firstRowLeft?.firstText?.label"
            [ngStyle]="item.consultantBox?.firstRowLeft?.firstText?.labelCssStyle|styleFilter">
            {{item.consultantBox.firstRowLeft.firstText.label}}
          </div>
        </div>
        <!--蜂喔赚钱宝 1.7.1新增修改推荐语弹出modal-->
        <div [ngStyle]="item.consultantBox?.firstRowLeft?.firstText?.boxCssStyle|styleFilter" class="updateCommentBox">
          <ng-container *ngFor="let btnItem of item.updateComment?.button">
            <p class="update-comment" *ngIf="btnItem" [ngStyle]="btnItem.btnCssStyle|styleFilter" appDebounceClick
              (debounceClick)="goPage(btnItem)">
              {{btnItem?.label}}</p>
          </ng-container>
        </div>
      </div>
    </div>

    <div class="fourthRight marginR125" [ngClass]="{'fourthRightLabel': item.fourthRowLeftLabel!==undefined}"
      *ngIf="item.fourthRowRightNew" [ngStyle]="item.fourthRowRightNewCssStyle|styleFilter">
      <ng-container *ngIf="item.fourthRowLeftLabel">
        <span class="fourthRightLabelText"
          [ngStyle]="item.fourthRowLeftLabel?.firstText?.cssStyle|styleFilter">{{item.fourthRowLeftLabel?.firstText?.label}}</span>
      </ng-container>
      <div>
        <ng-container *ngFor="let icons of item.fourthRowRightNew.iconList, let i = index">
          <span class="icon-label-bg" appDebounceClick (debounceClick)="iconClick(icons,dataIndex)">
            <!--隐藏按钮-->
            <img *ngIf="icons.hiddenIcon===undefined" src="{{icons.iconName}}">
            <p *ngIf=" icons.label && icons.label.length > 0" class="icon-label 1"
              [ngStyle]="icons?.iconCssStyle|styleFilter">
              {{icons.label}}
            </p>
          </span>
        </ng-container>
      </div>
    </div>
    <hr class="dividing-line" [ngStyle]="item.spLineCssStyle|styleFilter">
  </ng-container>
  <p class="noData" [ngStyle]="tagData.data?.footDiv?.detail?.noDataCssStyle|styleFilter"
    *ngIf="!tagData.data.data || tagData.data.data.length === 0">
    {{hint}}
  </p>
  <ion-infinite-scroll *ngIf="tagData.data.submit && pageTotal &&  (pageSize * pageNo < pageTotal) " threshold="1px"
    (ionInfinite)="loadMoreData($event)">
    <ion-infinite-scroll-content loadingSpinner="crescent" loadingText="正在加载更多数据...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</section>